<body style="overflow-x: auto">
<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="select-images-button">选择图片 (最多6张)</button>
    <button type="button" class="layui-btn" id="upload-button" style="visibility: hidden;float: right">开始上传</button>
    <div class="layui-upload-list" style="max-width: 1000px;">
        <table class="layui-table">
            <thead>
            <tr>
                <th style="text-align: center">文件名</th>
                <th style="text-align: center">大小</th>
                <th style="text-align: center">上传进度</th>
                <th style="text-align: center">操作</th>
            </tr>
            </thead>
            <tbody id="imageList"></tbody>
        </table>
    </div>
</div>
</body>

<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/xadmin.js"></script>
<script>
    layui.use(['upload', 'element', 'layer'], function () {
        let $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        let uploadListIns = upload.render({
            elem: '#select-images-button'
            , elemList: $('#imageList') //列表元素对象
            , url: '/index.php/admin/ImageZone/uploadImage'
            , accept: 'images'
            , acceptMime: 'image/*'
            , multiple: true
            , number: 6
            , size: 4096
            , auto: false
            , bindAction: '#upload-button'
            , choose: function (obj) {
                let that = this;
                let files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                if (files.length <= 0) return;
                $('#upload-button').css("visibility", "visible")
                //读取本地文件
                obj.preview(function (index, file, result) {
                    let tr = $(['<tr id="upload-' + index + '">'
                        , '<td style="text-align: center"><img src="' + result + '" alt="' + file.name + '"/></td>'
                        , '<td style="width:50px;text-align: center">' + (file.size / 1024).toFixed(1) + 'KB</td>'
                        , '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                        , '<td style="text-align: center">'
                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    that.elemList.append(tr);
                    element.render('progress'); //渲染新加的进度条组件
                });
            }
            , done: function (res, index, upload) { //成功的回调
                // console.log(res)
                let that = this;
                if (res.code === 0) { //上传成功
                    let tr = that.elemList.find('tr#upload-' + index), tds = tr.children();
                    // console.log(tr)
                    tds.eq(3).html('<span>上传成功</span>');
                    delete this.files[index]; //删除文件队列已经上传成功的文件
                } else {
                    this.error(index, upload);
                }
            }
            , allDone: function (obj) { //多文件上传完毕后的状态回调
                layer.msg('上传成功', {icon: 1, time: 1500}, () => {

                    let index = parent.layer.getFrameIndex(window.name);
                    //表格重载 就相当于 刷新父页面的表格-dataTable是父页面的表格ID属性
                    // parent.location.reload();
                    //关闭当前frame
                    parent.layer.close(index);

                });
                // console.log(obj)
            }
            , error: function (index, upload) { //错误回调
                let that = this;
                let tr = that.elemList.find('tr#upload-' + index), tds = tr.children();
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
            , progress: function (n, elem, e, index) { //注意：index 参数为 layui 2.6.6 新增
                // console.log(n)
                // console.log(elem)
                // console.log(index)
                // element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比

                layui.element.init();
                //todo 上传图片进度显示
                let percent = n + '%' //获取进度百分比

                element.progress('progress-demo-' + index, percent);

            }
        });

    })
</script>

<link rel="stylesheet" href="/static/css/font.css">
<link rel="stylesheet" href="/static/css/xadmin.css">
<style>
    .layui-upload {
        margin: 20px 20px;
    }
</style>
